iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0
Modern Web

Google Apps Script 整合運用系列 第 13

表單頁面(一)

  • 分享至 

  • xImage
  •  

想法

  1. 當按下「新增」、「編輯」時,會自動將畫面轉至「表單頁面」等待輸入資料
  2. 流程指標為 op=form_custom
  3. 「新增」sn=''、「編輯」sn=xxx:用流水號來判斷要做新增或編輯
  4. 這裡先用固定畫面處理,待日後將之用樣版語法,屆時可以套用到任何管理系統

程式

  1. 路由:

// 客戶管理 表單
Route.path("form_custom", form_custom);

記得函式 form_custom 要先建立,不然會報錯
2. form_custom(e)


/*========================================
  客戶資料 表單
=========================================*/
function form_custom(e){
  
}
  1. 判斷是否接收到 sn

/*========================================
  客戶資料 表單
=========================================*/
function form_custom(e){  
  let content = '';
  // 判斷是否接收到 sn
  let sn = e.parameter.sn ? e.parameter.sn : '';

  let title = sn ? '客戶 編輯表單' : '客戶 新增表單';
  content = `<h2 class='mt-3'>${title}</h2>`;
  
  content += render('form_custom', {}); 

  return render('tmp', {content: content}, title); 
}
  1. 上面有用到 form_custom 的樣版,故也要先建一個樣版 form_custom.html
  2. 表單結構規劃
    表單標題:form_label
    表單名稱:form_name
    表單預設值:form_value
    表單寬度:form_width => 1~12
    表單類別:form_kind => 隱藏|簡答|段落|下拉選單|單選|複選
    表單選項:form_option
    表單是否驗證:form_validate
    表單說明:form_readme
    表單暫留字:form_placeholder
<!-- 隱藏 -->
<input type="hidden" name="sn" id="sn" value="">

<!-- 簡答 -->
<div class="col-md-4 mb-3">
  <label>
    簡答
    <span class="text-danger"> *</span>
    <span class="text-danger"> (表單說明)</span>
  </label>
  <input type="text" class="form-control" name="f2" id="f2" value="表單預設值" placeholder="表單暫留字">
</div>

<!-- 段落 -->
<div class="col-md-12 mb-3">
  <label>
    段落
    <span class="text-danger"> *</span>
    <span class="text-danger"> (表單說明)</span>
  </label>
  <textarea class="form-control" name="f3" id="f3" rows="3" placeholder="表單暫留字">表單預設值</textarea>
</div>

<!-- 下拉選單 -->
<div class="col-md-12 mb-3">
  <label class="control-label">
    下拉選單
    <span class="text-danger"> (表單說明)</span>
  </label>
  <select name="f4" id="f4" class="form-select">
    <option>選單1</option>
    <option>選單2</option>
    <option>選單3</option>
    <option selected>選單4</option>
  </select>
</div>

<!-- 單選 -->
<div class="col-md-12 mb-3">
  <label class="control-label w-100">
    單選 
    <span class="text-danger"> (表單說明)</span>
  </label>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="f50" value="單選1" name="f5">
    <label class="form-check-label" for="f50">單選1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="f51" value="單選2" name="f5">
    <label class="form-check-label" for="f51">單選2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="f52" value="單選3" name="f5" checked>
    <label class="form-check-label" for="f52">單選3</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="f53" value="單選4" name="f5">
    <label class="form-check-label" for="f53">單選4</label>
  </div>
</div>

<!-- 複選 -->
<div class="col-md-12 mb-3">
  <label class="form-label w-100">
    複選
    <span class="text-danger"> (表單說明)</span>
  </label>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="f60" value="複選1" name="f6">
    <label class="form-check-label" for="f60">複選1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="f61" value="複選2" name="f6" checked="">
    <label class="form-check-label" for="f61">複選2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="f62" value="複選3" name="f6">
    <label class="form-check-label" for="f62">複選3</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="f63" value="複選4" name="f6">
    <label class="form-check-label" for="f63">複選4</label>
  </div>
</div>
  1. 本單元先將有用到的類型輸入,待看出規則後,再來套用樣版語法,讓後面要做的其他管理系統也可以套用該樣版。
    在 form_custom.html 把結構先註解以利處理
<!-- 
   let stru = [
    { title: '流水號', type: '' },//sn
    { title: '客戶名稱', type: '文字' },//title
    { title: '客戶電話', type: '文字' },//tel
    { title: '客戶地址', type: '文字' },//addr
    { title: '備註', type: '文字' },//ps
  ];
 -->
  1. 表單主架構

<form action="<?!= global['url'] ?>" id="myForm" class="mb-5" method="POST">
  <div class="row">
    
    
    <div class="col-md-12 d-grid">
      <button id="submit" type="submit" class="btn btn-primary btn-block">送出</button>
    </div>
  </div>
</form>  

  1. 畫面
  2. 每個表單欄位,視為元件,按類型套入即可, 客戶管理用到 隱藏、簡答、段落三種類別,另 下拉選單、單選、複選,待這裡處理好後,再來擴充。
  3. form_custom.html
    把元件放入後,將 label、name、id置換掉,其他如 value、placeholder、是否必填、表單說明再依需求設定在「表單結構」中,
    最終我們希望達到,設定「表單結構」,然後表單畫面自動完成。
<!-- 
   let stru = [
    { title: '流水號', type: '' },//sn
    { title: '客戶名稱', type: '文字' },//title
    { title: '客戶電話', type: '文字' },//tel
    { title: '客戶地址', type: '文字' },//addr
    { title: '備註', type: '文字' },//ps
  ];
 -->

<form action="<?!= global['url'] ?>" id="myForm" class="mb-5" method="POST">
  <div class="row">
    <!-- 隱藏 流水號 -->
    <input type="hidden" name="sn" id="sn" value="">    

    <!-- 簡答  -->
    <div class="col-md-4 mb-3">
      <label>
        客戶名稱
        <span class="text-danger"> *</span>
        <span class="text-danger"> (表單說明)</span>
      </label>
      <input type="text" class="form-control" name="title" id="title" value="表單預設值" placeholder="表單暫留字">
    </div>
        

    <!-- 簡答  -->
    <div class="col-md-4 mb-3">
      <label>
        客戶電話
        <span class="text-danger"> *</span>
        <span class="text-danger"> (表單說明)</span>
      </label>
      <input type="text" class="form-control" name="tel" id="tel" value="表單預設值" placeholder="表單暫留字">
    </div>

    <!-- 簡答  -->
    <div class="col-md-4 mb-3">
      <label>
        客戶地址
        <span class="text-danger"> *</span>
        <span class="text-danger"> (表單說明)</span>
      </label>
      <input type="text" class="form-control" name="addr" id="addr" value="表單預設值" placeholder="表單暫留字">
    </div>
    
    <!-- 段落 -->
    <div class="col-md-12 mb-3">
      <label>
        備註
        <span class="text-danger"> *</span>
        <span class="text-danger"> (表單說明)</span>
      </label>
      <textarea class="form-control" name="ps" id="ps" rows="3" placeholder="表單暫留字">表單預設值</textarea>
    </div>
    
    <div class="col-md-12 d-grid">
      <button id="submit" type="submit" class="btn btn-primary btn-block">送出</button>
    </div>
  </div>
</form>  

  1. 畫面

上一篇
Bootstrap Table(二)
下一篇
表單頁面(二)
系列文
Google Apps Script 整合運用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言